 * {
     list-style: none;
 }

 body {
     display: flex;
     justify-content: center;
     background-color: #272525;
 }

 .total {
     width: 100%;
     height: 100%;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(2, 1fr);
     /* background-color: palegoldenrod; */
     grid-gap: 1vmin;
 }

 .btn-normal {
     /* width: 33vmin; */
     /* height: 70vh; */
     padding: 5cqh;
     background: linear-gradient(to bottom, rgb(137, 207, 235, .8), rgb(153, 205, 50, .8)) no-repeat;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .btn-easy {
     /* width: 33vmin; */
     /* height: 70vh; */
     padding: 5cqh;
     background: linear-gradient(to bottom, rgba(130, 217, 252, 0.8), rgba(241, 132, 245, 0.7)) no-repeat;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .btn-hard {
     /* width: 33vmin; */
     /* height: 70vh; */
     padding: 5cqh;
     background: linear-gradient(to bottom, rgba(244, 160, 127, 0.8), rgba(132, 135, 48, 0.7)) no-repeat;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .btn-veryhard {
     /* width: 33vmin; */
     /* height: 70vh; */
     padding: 5cqh;
     background: linear-gradient(to bottom, rgba(246, 43, 43, 0.78), rgba(82, 55, 11, 0.7)) no-repeat;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .btn-more {
     /* height: 70vh; */
     padding: 5cqh;
     background-color: #ddd;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 p {
     font-size: 2.2vmin;
     text-align: center;
     font-weight: 800;
 }

 i {
     font-size: 2vmin;
 }